<template>
<el-drawer :title="formDrawer.title" :visible.sync="formDrawer.visible" direction="rtl" custom-class="drawer-right-side" :before-close="closeDrawer">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" label-position="left" class="ruleForm">
        <el-form-item label="所属部门">
            <el-tree show-checkbox ref="departmentTree" :data="tree" node-key="id" :expand-on-click-node="false" highlight-current :check-strictly="true" :default-checked-keys="treeChecked" :default-expanded-keys="treeChecked">
                <div class="custom-tree-node" slot-scope="{ node }">
                    <span>{{ node.label }}</span>
                </div>
            </el-tree>
        </el-form-item>

        <el-form-item label="登陆名称" prop="nickname">
            <el-input v-model="ruleForm.nickname"></el-input>
        </el-form-item>

        <el-form-item label="真实姓名" prop="realname">
            <el-input v-model="ruleForm.realname"></el-input>
        </el-form-item>

        <el-form-item label="性别" prop="sex">
            <el-select v-model="ruleForm.sex" placeholder="请选择">
                <el-option v-for="(row, index) in sexList" :key="index" :label="row.title" :value="row.id"></el-option>
            </el-select>
        </el-form-item>

        <el-form-item label="登陆密码">
            <el-input v-model="ruleForm.password" type="password" key="editPwd"></el-input>
        </el-form-item>

        <el-form-item label="手机号" prop="mobile" required>
            <el-input type="number" @keydown.down.native.prevent @keydown.up.native.prevent @mousewheel.native.prevent v-model="ruleForm.mobile"></el-input>
        </el-form-item>

        <el-form-item label="邮箱" prop="email" required>
            <el-input v-model="ruleForm.email"></el-input>
        </el-form-item>

        <el-form-item label="职责" prop="user_type" required>
            <el-select v-model="ruleForm.user_type" placeholder="请选择">
                <el-option v-for="(item, index) in userTypeList" :key="index" :label="item.title" :value="item.id"></el-option>
            </el-select>
        </el-form-item>

        <el-form-item label="企业微信" prop="work_wechat">
            <el-input v-model="ruleForm.work_wechat"></el-input>
        </el-form-item>

        <el-form-item label="同步企业微信" prop="is_sync_work_wechat">
            <el-switch v-model="ruleForm.is_sync_work_wechat" :active-value="1" :inactive-value="0"></el-switch>
        </el-form-item>

        <el-form-item label="商品分类" prop="category_id">
            <picker-view v-model="ruleForm.category_id" type="category" placeholder="商品分类"></picker-view>
        </el-form-item>

        <el-form-item label="上/下线" prop="status" required>
            <el-select v-model="ruleForm.status" placeholder="请选择">
                <el-option v-for="(item, index) in statusList" :key="index" :label="item.title" :value="item.id"></el-option>
            </el-select>
        </el-form-item>

        <el-form-item label="排序" prop="sort">
            <el-input v-model="ruleForm.sort"></el-input>
        </el-form-item>

        <el-form-item>
            <input type="hidden" name="id" v-model="ruleForm.id" />
            <el-button type="primary" @click="saveDrawer('ruleForm')">保存</el-button>
        </el-form-item>
    </el-form>
</el-drawer>
</template>

<script>
import pickerView from "@/components/picker/select.vue";

import {
    getDepartmentTreeApi
} from "@/api/ucenter/department";

import {
    createUserApi,
    saveUserApi,
    readUserApi,
    deleteUserApi,
} from "@/api/ucenter/user";

const ruleForm = {
    id: 0,
    user_id: 0,
    department: [],
    nickname: "",
    realname: "",
    password: "",
    mobile: "",
    sex: "",
    status: "",
    sort: 0,
    work_wechat: "",
    is_sync_work_wechat: 1,
    category_id: "",
};

const formDrawer = {
    title: "",
    visible: false,
    type: "",
};

export default {
    components: {
        pickerView,
    },
    data() {
        return {
            formDrawer: Object.assign({}, formDrawer),
            tree: [],
            treeChecked: [],
            sexList: [{
                    id: 0,
                    title: "女",
                },
                {
                    id: 1,
                    title: "男",
                },
            ],
            statusList: [{
                    id: 0,
                    title: "下线",
                },
                {
                    id: 1,
                    title: "上线",
                },
            ],
            userTypeList: [{
                    id: 1,
                    title: "员工",
                },
                {
                    id: 2,
                    title: "管理",
                },
            ],
            ruleForm: Object.assign({}, ruleForm),
            rules: {
                // department_id: [{ required: true, message: '请选择所属部门', trigger: 'change' }],
                nickname: [{
                        required: true,
                        message: "请输入登录名称",
                        trigger: "blur",
                    },
                    {
                        min: 1,
                        max: 100,
                        message: "长度在 1 到 100 个字符",
                        trigger: "blur",
                    },
                ],
                realname: [{
                        required: true,
                        message: "请输入真实姓名",
                        trigger: "blur",
                    },
                    {
                        min: 2,
                        max: 100,
                        message: "长度在 1 到 100 个字符",
                        trigger: "blur",
                    },
                ],
                sex: [{
                    required: true,
                    message: "请选择性别",
                    trigger: "change",
                }, ],
                password: [{
                    required: true,
                    message: "请输入登录密码",
                    trigger: "blur",
                }, ],
                mobile: [{
                        required: true,
                        message: "请输入电话",
                        trigger: "blur",
                    },
                    {
                        pattern: /^1(3|5|6|7|8|9)\d{9}$/,
                        message: "手机号不合法",
                        trigger: "blur",
                    },
                ],
                email: [{
                    type: "email",
                    message: "请输入正确的邮箱地址",
                    trigger: ["blur", "change"],
                }, ],
            },
        };
    },
    created() {
        this.getTree();
    },
    methods: {
        // 获取下拉列表
        getTree() {
            getDepartmentTreeApi().then((res) => {
                let tree = res.data.tree;
                this.tree = tree;
            });
        },
        // 显示创建用户
        showCreateDrawer() {
            this.resetRuleForm();
            this.formDrawer.title = "创建用户";
            this.formDrawer.visible = true;
            this.formDrawer.type = "add";
        },

        // 显示编辑用户
        showEditDrawer(row) {
            this.resetRuleForm();
            this.formDrawer.title = "编辑用户";
            this.formDrawer.visible = true;
            this.formDrawer.type = "save";
            readUserApi({
                id: row.id,
            }).then((res) => {
                if (res.code == "200") {
                    let user = res.data.user;
                    user.category_id = user.category_id > 0 ? user.category_id.toString() : "";
                    this.ruleForm = user;
                    this.treeChecked = user.department;
                } else {
                    this.$message.error(res.msg);
                }
            });
        },
        // 保存编辑
        saveDrawer(formName) {
            this.ruleForm.department = this.$refs["departmentTree"].getCheckedKeys();
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    if (this.formDrawer.type == "add") {
                        createUserApi(this.ruleForm).then((res) => {
                            if (res.code == 200) {
                                this.$emit("getTableData", {});
                                this.closeDrawer();
                                this.$message.success(res.msg);
                            } else {
                                this.$message.error(res.msg);
                            }
                        });
                    } else {
                        saveUserApi(this.ruleForm).then((res) => {
                            if (res.code == 200) {
                                this.$emit("getTableData", {});
                                this.closeDrawer();
                                this.$message.success(res.msg);
                            } else {
                                this.$message.error(res.msg);
                            }
                        });
                    }
                } else {
                    this.$message("验证失败");
                }
            });
        },

        // 关闭抽屉时
        closeDrawer() {
            this.resetRuleForm();
            this.formDrawer.visible = false;
        },

        // 清空抽屉内容
        resetRuleForm() {
            // 重置所选部门树
            if (this.$refs.departmentTree != undefined) {
                this.$refs.departmentTree.setCheckedKeys([]);
            }

            this.ruleForm = Object.assign({}, ruleForm);
        },
    },
};
</script>
